<template>
	<el-dialog :visible.sync="options.showDialog" width="800px" class="evalDialog">
		<h3 class="header-title clearfix">
			<span class="border"></span>
			<p>审核门店信息</p>
		</h3>
		<el-form ref="form" :model="form" label-width="100px" class="store-input">
			<el-form-item label="门店名称">
				<el-input v-model="form.shopName" style="width: 300px;"></el-input>
			</el-form-item>
			<el-form-item label="门店展示照片">
				<el-upload action="https://zjsy.fcw-china.com/elecon/electronic/contract/UploadPic" 
					list-type="picture-card" :on-success="success" :before-upload="beforeAvatarUpload"
					:on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="1"
					:class="{hide: form.shopShowPhoto != ''}" :file-list="fileList">
				  <i class="el-icon-plus"></i>
				</el-upload>
			</el-form-item>
			<p>信息审核完成 需要发送电子合同 门店创建者完成签署后，<br>业务员负责取得 创建者与发才网门店拍照合照后由后台录入</p>
		</el-form>
		<div class="opt-btn">
			<el-button size="small" @click="onSubmit" style="width: 100px;">确认通过</el-button>
			<el-button size="small" @click="options.showDialog = false;" style="width: 100px;">取消</el-button>
		</div>
		<el-dialog :visible.sync="dialogVisible" width="600px" :modal="false">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</el-dialog>
</template>

<script>
export default{
	props:{
		options:{
			type: Object,
			require: true
		}
	},
	data(){
		return {
			fileList:[],										//
			form:{
				shopName: '',									//门店名称
				shopShowPhoto: '',								//门店照片
			},
			dialogImageUrl: '',
			dialogVisible: false
		}
	},
	methods:{
		beforeAvatarUpload(file){
			// console.log(file);
			const isJPEG = file.type === 'image/jpeg';
			const isJPG = file.type === 'image/jpg';
			const isGIF = file.type === 'image/gif';
			const isPNG = file.type === 'image/png';
			const isBMP = file.type === 'image/bmp';
			const isLt2M = file.size / 1024 / 1024 < 1;
			if (!isJPEG && !isJPG && !isGIF && !isPNG && !isBMP && !isJPG) {
				this.$message.error('上传图片必须是JPG/JPEG/GIF/PNG/BMP 格式!')
				return false
			}
			
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 1MB!');
			}
			return isLt2M;
		},
		handleRemove(file, fileList) {
			// console.log(file, fileList);
			this.form.shopShowPhoto = '';
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		success(res, file){
			/* console.log(res);
			console.log(file); */
			this.form.shopShowPhoto = res.data;
			this.$message.success('照片上传成功！');
		},
		onSubmit(){
			if(!this.form.shopName || !this.form.shopShowPhoto){
				this.$message.warning('请将信息填写完整！');
				return false;
			}else{
				this.$emit('passStore',this.form);
				this.clearData();
			}
		},
		clearData(){
			this.form = {
				shopName: '',									//门店名称
				shopShowPhoto: '',								//门店照片
			}
			this.fileList = [];
		}
	},
	watch:{
		'options.showDialog'(){
			if(this.options.showDialog){
				if(this.options.userInfo.shopShowPhoto){
					this.form.shopName = this.options.userInfo.shopName;
					this.form.shopShowPhoto = this.options.userInfo.shopShowPhoto;
					this.fileList = [{
						url: this.form.shopShowPhoto
					}]
				}else{
					this.clearData();
				}
			}
		}
	}
}
</script>

<style scoped="scoped">
.header-title{padding: 20px;}
.header-title .border{width: 15px;height: 40px;background-color: #0064E4;margin-right: 20px;float: left;}
.header-title p{float: left;font-weight: bold;line-height: 40px;font-size: 20px;}
.store-input{margin: 0 56px 20px;}
.store-input p{line-height: 20px;color: red;margin-top: 20px;}
.opt-btn{text-align: center;padding: 30px 0;}
</style>
